<template>
  <div class="page-container">
    <div class="user-info-container">
      <img :src="avatar" alt="Avatar" class="avatar" />
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="学号">
          <el-input v-model="form.userId" disabled/>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="form.userName" :disabled="isDisabled"/>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="form.userSex" :disabled="isDisabled"/>
        </el-form-item>
        <!-- <el-form-item label="班级">
          <el-input v-model="form.courseId" :disabled="isDisabled"/>
        </el-form-item> -->
        <el-form-item label="电话号码">
          <el-input v-model="form.userPhone" :disabled="isDisabled"/>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="form.userEmail" :disabled="isDisabled"/>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="form.type" disabled/>
        </el-form-item>
      </el-form>
    <el-row :gutter="20" class="search">
      <el-col :offset="6" :span="2">
        <el-button size="mini" type="primary" @click="dialogVisible = true, isDisabled = false">编辑</el-button>
      </el-col>    
      <el-col :offset="8" :span="2">
      <el-button size="mini" type="primary" @click="submitEdit()" :style="{ visibility: dialogVisible ? 'visible' : 'hidden' }">确定</el-button>
      </el-col>
    </el-row>
    </div>
   
  </div>
</template>

<script>
import axios from 'axios'
import Login from '@/views/login/Index'

export default {
  components: {
    Login
  },
  data() {
    return {
      avatar: '/icon/personal.png',
      form: { // 确保 form 初始化为空对象
        userId: '',
        userName: '',
        userSex: '',
        userPhone: '',
        userEmail: '',
        type: ''
      },
      input: "",
      dialogVisible: false,
      isDisabled: true,
    };
  },
  methods: {
    submitEdit() {
      axios.post('http://localhost:9999/user/updateUser', this.form)
        .then(res => {
          console.log(res.data);
          this.getData();
          this.toggleDisabled(); // 放在 then 内部
          this.dialogVisible = false; // 放在 then 内部
        })
        .catch(error => {
          console.error(error);
        });
    },
    toggleDisabled() {
      this.isDisabled = !this.isDisabled;
    },
    getData() {
      const id = JSON.parse(localStorage.getItem('users'));
      if (id) { // 检查是否有效
        axios.get('http://localhost:9999/user/getUserById', { params: id }) // 使用 get 并通过 params 发送 ID
          .then(res => {
            console.log(res.data);
            this.form = res.data;
          })
          .catch(error => {
            console.error(error);
          });
      } else {
        console.error('Invalid ID in localStorage');
      }
    }
  },
  mounted() {
    this.getData();
  }
}
</script>
<style scoped>
.page-container {
  display: flex;
  justify-content: center; /* 使子元素居中 */
  align-items: center;
  min-height: 100vh; /* 使容器至少占满整个视口高度 */
  background-color: #eaeaea; /* 页面背景颜色 */
}

.user-info-container {
  background-color: #f0f0f0;
  padding: 20px;
  width: 400px; /* 调整宽度 */
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}

.form-container {
  width: 100%; /* 占满容器宽度 */
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.label {
  font-size: 16px;
  margin-right: 10px;
  width: 80px;
}

.input-field {
  flex: 1;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-left: 10px;
}

.button-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 20px;
}

.button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

.button:hover {
  background-color: #45a049;
}
</style>
